<template>
  <div class="dataBoard_content grid">
    <!-- 左 -->
    <div class="dataBoard_left flex flex-c">
      <div class="dataBoard_leftTop flex flex-c mb-10 content_topHeight">
        <transferSituationRightFooter class="flex-1 mb-10" />
        <transferSituationRightTop class="flex-1" />
      </div>

      <transferSituationPie class=" " />



    </div>
    <!-- 中 -->
    <div class="dataBoard_main">
      <transferSituationMainTop class="mb-10 content_topHeight" />
      <transferSituationMainFooter class="mb-10" />
    </div>
    <!-- 右 -->
    <div class="dataBoard_right">

      <div class="dataBoard_leftTop flex flex-c mb-10 content_topHeight">
        <transferSituation1 class="flex-1 mb-10" />
        <transferSituation2 class="flex-1 mb-10" />
        <transferSituation3 class="flex-1 " />
      </div>
      <transferSituation4 class=" " />
      <!-- <transferSituationRightMain class="mb-10" /> -->
      <!-- <transferSituationStatistics class=" content_topHeight" /> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
import transferSituation1 from "./components/transferStation-left/transferSituation1.vue";
import transferSituation2 from "./components/transferStation-left/transferSituation2.vue";
import transferSituation3 from "./components/transferStation-left/transferSituation3.vue";
import transferSituation4 from "./components/transferStation-left/transferSituation4.vue";
import transferSituationPie from "./components/transferStation-left/transferSituationPie.vue";
import transferSituationStatistics from "./components/transferStation-left/transferSituationStatistics.vue";
import transferSituationMainTop from "./components/transferStation-main/transferSituationMainTop.vue";
import transferSituationMainFooter from "./components/transferStation-main/transferSituationMainFooter.vue";
import transferSituationRightTop from "./components/transferStation-right/transferSituationRightTop.vue";
import transferSituationRightMain from "./components/transferStation-right/transferSituationRightMain.vue";
import transferSituationRightFooter from "./components/transferStation-right/transferSituationRightFooter.vue";

const store = useStore();

const props = defineProps<{}>();

onMounted(() => { });

onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.dataBoard_content {
  width: 100%;
  padding: 10px;
  grid-template-columns: 330px 3fr 330px;
  grid-gap: 10px;

  .content_topHeight {
    height: 530px;
  }


  .dataBoard_leftTop {
    width: 100%;
  }

  .dataBoard_left {
    width: 100%;

  }

  .dataBoard_main {
    width: 100%;

    // grid-template-rows: 1fr 3fr 1fr;
    // grid-gap: 10px;
    .item {
      width: 100%;
      height: 100%;
    }
  }

  .dataBoard_right {
    width: 100%;
  }
}
</style>